<script>
export default lookOrder;
import lookOrder from "./index";
</script>
<!--src 引用css样式-->
<style src="../salesOutbound/index.css" lang="css"></style>


<template>
  <div class="brand-wrapper" align="center">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/salesOutbound' }">销售出库</el-breadcrumb-item>
      <el-breadcrumb-item>销售出库订单查看</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>


    <el-descriptions class="margin-top" title="销售出库订单信息" :column="3" size="small" border>
      <el-descriptions-item label="销售出库订单号">
        {{ detailedInfo.salesOutOrderId }}
      </el-descriptions-item>
      <el-descriptions-item label="订单状态">
        <el-tag size="small">{{ detailedInfo.orderStatus }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="订单类型">{{ detailedInfo.orderType }}</el-descriptions-item>
      <el-descriptions-item label="业务类型">{{ detailedInfo.businessType }}</el-descriptions-item>
      <el-descriptions-item label="销售出库订单时间">{{ detailedInfo.salesOutOrderDate }}</el-descriptions-item>
    </el-descriptions>
    <el-divider></el-divider>
    <h4>出库商品列表</h4>
    <el-divider></el-divider>
    <template>
      <el-table
          :data="detailedList"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="序号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="goodsId"
            label="商品编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="goodsName"
            label="商品名称">
        </el-table-column>
        <el-table-column
            prop="goodsColor"
            label="商品颜色">
          <template slot-scope="scope">
            <span v-if="scope.row.goodsColor=='金色'">
              <span style="background: gold">&nbsp;&nbsp;
              </span>
              &nbsp;&nbsp;
              <el-tag>
                {{ scope.row.goodsColor }}
              </el-tag>
            </span>
            <span v-if="scope.row.goodsColor=='黑色'">
              <span style="background: black">&nbsp;&nbsp;
              </span>
              &nbsp;&nbsp;
              <el-tag>
                {{ scope.row.goodsColor }}
              </el-tag>
            </span>
            <span v-if="scope.row.goodsColor=='白色'">
              <span style="background: beige">&nbsp;&nbsp;
              </span>
              &nbsp;&nbsp;
              <el-tag>
                {{ scope.row.goodsColor }}
              </el-tag>
            </span>
            <span v-if="scope.row.goodsColor=='蓝色'">
              <span style="background: blue">&nbsp;&nbsp;
              </span>
              &nbsp;&nbsp;
              <el-tag>
                {{ scope.row.goodsColor }}
              </el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column
            prop="goodsNum"
            label="订购数量">
        </el-table-column>
      </el-table>
    </template>


    <h4>出库商品串号列表</h4>
    <el-divider></el-divider>

    <template>
      <el-table
          :data="detailedOrderImel"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="序号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="goodsId"
            label="商品编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="goodsName"
            label="商品名称">
        </el-table-column>
        <el-table-column
            prop="goodsColor"
            label="商品颜色">
          <template slot-scope="scope">
            <span v-if="scope.row.goodsColor=='金色'">
              <span style="background: gold">&nbsp;&nbsp;
              </span>
              &nbsp;&nbsp;
              <el-tag>
                {{ scope.row.goodsColor }}
              </el-tag>
            </span>
            <span v-if="scope.row.goodsColor=='黑色'">
              <span style="background: black">&nbsp;&nbsp;
              </span>
              &nbsp;&nbsp;
              <el-tag>
                {{ scope.row.goodsColor }}
              </el-tag>
            </span>
            <span v-if="scope.row.goodsColor=='蓝色'">
              <span style="background: blue">&nbsp;&nbsp;
              </span>
              &nbsp;&nbsp;
              <el-tag>
                {{ scope.row.goodsColor }}
              </el-tag>
            </span>
            <span v-if="scope.row.goodsColor=='白色'">
              <span style="background: beige">&nbsp;&nbsp;
              </span>
              &nbsp;&nbsp;
              <el-tag>
                {{ scope.row.goodsColor }}
              </el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column
            prop="outImel"
            label="出库串码" v-if="detailedInfo.orderStatus=='已出库'">
          <template slot-scope="{row}">
            <span v-for="rr in row.outImel"
                  :key="rr">
              <el-tag>
                {{ rr }}
              </el-tag>
              &nbsp;
          </span>
          </template>
        </el-table-column>

        <el-table-column label="出库串码" v-if="detailedInfo.orderStatus=='待出库'">
          <template slot-scope="scope">
            <div v-for="count in scope.row.goodsNum" :key="count">
              <el-input  ref='test' v-model="scope.row.outImel[count-1]">
              </el-input>
              <br/>
              <br/>
            </div>

          </template>

          <!--          prop="detailedOrderImel.outImel"-->
          <!--          <template slot-scope="row">-->
          <!--            {{row.outImel}}-->
          <!--            <div v-for="(item,index) in list" :key="index">-->
          <!--              <el-input @change="textbox($data[item.input])"  ></el-input>-->
          <!--            </div>-->
          <!--          </template>-->

          <!--          <template v-for="item in detailedOrderImel">-->

          <!--            <el-input :value="detailedOrderImel.outImel" v-model="detailedOrderImel.outImel"></el-input>-->
          <!--          </template>-->
          <!--               <el-input v-for="count in scope.row.goodsNum" :key="count" ref='test' v-model="scope.row.outImel[count-1]"></el-input>-->
          <!--                  <el-input :key="scope.row.id" ref='test' v-model="scope.row.outImel"></el-input>-->
          <!--                  <el-input id="hiddenId" :value="test=scope.row.id"></el-input>-->
          <!--            <el-button @click="aaaStr"></el-button>-->
          <!--          </template>-->
        </el-table-column>
      </el-table>
    </template>
    <el-divider></el-divider>
    <el-divider><i class="el-icon-caret-bottom"></i></el-divider>
    <el-button v-if="detailedInfo.orderStatus=='待出库'" type="info" @click="commitImel(false)">暂存</el-button>
    <el-button v-if="detailedInfo.orderStatus=='待出库'" type="primary" @click="commitImel(true)">录入完毕</el-button>
    <el-button type="primary" @click="lookBack">返回</el-button>
    <el-divider></el-divider>
  </div>
</template>


